<template>
  <Form ref="form" :model="data" :label-width="labelWidth" :label-position="labelPosition">
    <Row :gutter="24" type="flex" justify="start" style="padding:2px 5px;">
      <Col v-for="(item,index) in columns" :key="index" :span="24/cols">
        <FormItem :label="item.title" :prop="item.key" :rules="item.rule">
          <field-cell v-if="!onlyRead" :config="item.config" v-model="data[item.key]"></field-cell>
          <span v-else>{{data[item.key]}}</span>
        </FormItem>
      </Col>
    </Row>
  </Form>
</template>

<script>
    import fieldCell from 'public/components/basic/fieldCell'
    export default {
        name: 'form-rule',
        components: { fieldCell },
        data () {
            return {
            }
        },
        props: {
            labelWidth: {
                default: () => {
                    return 100;
                }
            },
            labelPosition: {
                default: () => {
                    return 'right';
                }
            },
            cols: {
                default: () => {
                    return 3;
                }
            },
            columns: {
                default: () => {
                    return [];
                }
            },
            data: {
                default: () => {
                    return {};
                }
            },
            onlyRead: {
                default: () => {
                    return false
                }
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>
